<template>
	<div>
		<!-- https://animate.style/ -->
		<div>
			<div>
				<div class="reveal-top">你好</div>
			</div>
			<div>
				<div class="reveal-top">你好</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	// 导入scrollReveal
	const {
		$scrollReveal
	} = useNuxtApp()

	const data = ref < any > (null)

	onMounted(() => {
		if (process.client) {
			retScroll($scrollReveal)
		}
	})
	/**
	 * //     属性：（默认）
	           delay: 0,                                // 延时时间
	           distance: '0px',                            // 执行距离
	           duration: 600,                            // 执行时长
	           easing: 'cubic-bezier(0.5, 0, 0, 1)',     // 执行速度
	           interval: 0,                                // 执行间隔（时间）
	           opacity: 0,                                // 执行方式（透明度）
	           origin: 'bottom',                        // 执行方式（偏移 top:自上而下,bottom:自下而上,left:自左往右,right:自右往左.）
	           rotate: {                                // 执行方式（旋转）
	               x: 0,                                // x
	               y: 0,                                // y
	               z: 0,                                // z
	           },
	           scale: 1,                                // 执行方式（缩放）
	           cleanup: false,                            // 暂时不知道是什么东西
	           container: document.documentElement,        // 执行容器（后跟元素，填写后只有容器内的元素执行动画）
	           desktop: true,                            // 是否在电脑上面执行
	           mobile: true,                            // 是否在手机上面执行
	           reset: false,                            // 是否重复执行（）
	           useDelay: 'always',                        // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
	           viewFactor: 0.0,                            // 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）
	           viewOffset: {                            // 视图偏移（把视图抽象成元素移动）
	               top: 0,
	               right: 0,
	               bottom: 0,
	               left: 0,
	           },
	           afterReset: function (el) {},            // 重置之后（视图内看不到元素之后，退场动画执行结束之后）
	           afterReveal: function (el) {},            // 执行之后（动画已经执行完毕（已完成））
	           beforeReset: function (el) {},            // 重置之前（视图内看不到元素之后，退场动画执行结束之前）
	           beforeReveal: function (el) {},            // 执行之前（动画开始执行（未完成时））　//     属性：（默认）
	// 
	 */
	const retScroll = (data: any) => {
		data.reveal('.reveal-top', {
			// 动画的时长
			duration: 800,
			// 延迟时间
			delay: 300,
			// 动画开始的位置，'bottom', 'left', 'top', 'right'
			origin: 'bottom',
			// 回滚的时候是否再次触发动画
			reset: false,
			// 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
			// // useDelay: 'onload',
			// 在移动端是否使用动画
			mobile: true,
			// 滚动的距离，单位可以用%，rem等
			distance: '10px',
			// 其他可用的动画效果
			opacity: 0.01,
			// 执行速度 线性函数啥的
			easing: 'cubic-bezier(0.5, 0, 0, 1)',
			// 执行方式（缩放）
			scale: 0.9,
			// 使用执行之前的回调函数
			beforeReveal: function(ele) {
			},
		})
	}
</script>

<style lang="scss" scoped>
	.reveal-top {
		height: 100vh;
	}
</style>
